<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="formUser" label-width="80px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formUser.username" placeholder="请输入用户名"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="formUser.password" placeholder="请输入登录密码"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formUser.phone" placeholder="请输入手机号"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formUser.email" placeholder="请输入邮箱"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="分配角色" prop="roleId">
          <el-select v-model="formUser.roleId" style="width: 100%" placeholder="请选择角色">
            <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="备注">
          <el-input :rows="2" type="textarea" v-model="formUser.remarks" placeholder="请输入备注"/>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>

  <div class="dialog-button-wrap">
    <el-button @click="close">取消</el-button>
    <el-button @click="addUser(ruleFormRef)" :loading="subLoading" type="success" color="#e88d53" class="add-user">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import { ElMessage,FormInstance,FormRules } from "element-plus";
import {addUserApi,getAllRoleListApi} from "@/api/system/user/user.ts";

// 定义事件
const emit = defineEmits(['closeAddUserForm','success'])

// 按钮状态
const  subLoading = ref(false);
// 表单数据对象
const formUser = reactive({
  username: '',
  password: '123456',
  phone: '13877042895',
  email: '',
  remarks: '',
  roleId: ''
});

// 新增管理员函数
const addUser = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await  formEl.validate(async (valid,field) => {
    subLoading.value = true;
    if (valid) {
      const { data } =  await addUserApi(formUser);
      if (data.code === 200) {
        ElMessage.success(data.msg);
      } else {
        ElMessage.error(data.msg);
      }
      emit('success')
    } else {
      ElMessage.error("提交表单失败,你还有未填写的项")
    }
  })
  subLoading.value = false;
}

const roleOptions = ref<object[]>([]);
// 获取所有角色
const getAllRoleList = async () => {
  const { data } = await getAllRoleListApi();
  roleOptions.value = data.result;
}



// 点击取消关闭弹出框
const close = () => {
  emit('closeAddUserForm')
}


// 添加表单校验
// 表单实例读写
const ruleFormRef = ref<FormInstance> ();
// 表单约束规则对象
const rules = reactive<FormRules>({
  username: [{ required: true,message: '用户名不能为空',trigger: 'blur' }],
  password: [{ required: true,message: '密码不能为空',trigger: 'blur' }],
  phone: [{ required: true,message: '手机号不能为空',trigger: 'blur' }],
  email: [{ required: true,message: '邮箱不能为空',trigger: 'blur' }],
  roleId: [{ required: true,message: '角色不能为空',trigger: 'blur' }],
})
onMounted(() => {
  getAllRoleList()
}) ;


</script>

<style scoped>
.dialog-button-wrap {
  text-align: center;
  margin-top: 20px;
}
.add-user {
  color: white;
}

</style>